{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2023, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<div class="row">
  <div class="large-6 columns">
    <table class="dataTable">
      <thead>
        <tr>
          <th colspan="3">{{tr "Information"}}</th>
        </tr>
      </thead>
      <tbody>
       <tr>
        <td class="key_td">{{tr "ID"}}</td>
        <td class="value_td">{{element.ID}}</td>
        <td></td>
      </tr>
      {{{renameTrHTML}}}
    </tbody>
  </table>
</div>
</div>
<div class="row">
  <div class="large-12 columns">
    <table class="dataTable">
      <thead>
        <tr>
          <th colspan="4">{{tr "Overcommitment"}}
          <span class="right">
            <button id="update_reserved" type="button" class="button small success update_reserved right radius">
              {{tr "Update"}}
            </button>
          </span>
          </th>
        </tr>
      </thead>
      <tbody>
          <tr colspan="3">
            <td class="key_td">{{tr "Reserved CPU"}}</td>
            <td><input type="range" name="rangeInput" id="change_bar_cpu" min="-100" value="{{percentCPU}}" max="100">
            <label align="center">0%</label></td>
            <td><input type="text" id="textInput_reserved_cpu" value="{{percentCPUinput}}" min="-100" max="100" size="1"></td>
          </tr>
          <tr colspan="3">
            <td class="key_td">{{tr "Reserved Memory"}}</td>
            <td><input type="range" name="rangeInput" id="change_bar_mem" min="-100" value="{{percentMEM}}" max="100">
            <label align="center">0%</label></td>
            <td><input type="text" id="textInput_reserved_mem" value="{{percentMEMinput}}" min="-100" max="100" size="1"></td>
          </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="row">
  <div class="large-9 columns">
    {{{templateTableHTML}}}
  </div>
</div>
